<template>
  <div class="container">
    <div class="body">
      <el-form
        ref="createLoanValue"
        :model="createLoanValue"
        label-width="120px"
      >
        <el-form-item :label="createLoanRemark.prover">
          <el-select
            v-model="createLoanValue.approverId"
            :placeholder="createLoanRemark.proverOptions[0].label"
            disabled
          >
            <el-option
              v-for="item in createLoanRemark.proverOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="createLoanRemark.type">
          <el-select
            v-model="createLoanValue.type"
            :placeholder="createLoanRemark.typeOptions[1].label"
            disabled
          >
            <el-option
              v-for="item in createLoanRemark.typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="createLoanRemark.totalMoney">
          <el-input v-model="createLoanValue.totalMoney" />
        </el-form-item>
        <el-form-item :label="createLoanRemark.interestRate">
          <el-input v-model="createLoanValue.interestRate" />
        </el-form-item>
        <el-form-item :label="createLoanRemark.createdTime">
          <el-col :span="24">
            <el-date-picker
              v-model="createLoanValue.createdTimeNNN"
              type="date"
              :placeholder="
                new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '')
              "
              style="width: 100%"
              :default-value="new Date()"
              disabled
            />
          </el-col>
        </el-form-item>
        <el-form-item required label="附件" prop="file">
          <el-upload
            class="upload-demo"
            drag
            action="#"
            :limit="1"
            :auto-upload="false"
            :on-change="onChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传单文件，且不超过100MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createLoan">创建</el-button>
          <el-button @click="hide">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      createLoanValue: {
        approverId: "1234",
        type: "MortgageLoan",
        totalMoney: "",
        interestRate: "0.1",
        file: "",
        createdTime: "",
        url: "/basic/loan/add/mortgage",
      },
      createLoanRemark: {
        prover: "贷款人",
        proverOptions: [
          {
            label: "交大银行",
            value: "1234",
          },
          {
            label: "其他人",
            value: "1234567",
          },
        ],
        type: "贷款类型",
        typeOptions: [
          {
            label: "信用贷",
            value: "CreditLoan",
          },
          {
            label: "抵押物贷款",
            value: "MortgageLoan",
          },
        ],
        totalMoney: "总额",
        interestRate: "利率",
        createdTime: "贷款时间",
      },
    };
  },
  created() {
    this.getDefaultValue()
  },
  methods: {
    getDefaultValue(){      
      this.createLoanValue= {
        approverId: "1234",
        type: "MortgageLoan",
        totalMoney: "",
        interestRate: "0.1",
        file: "",
        createdTime: "",
        url: "/basic/loan/add/mortgage"
      }
    },
    createLoan() {
      let formData = new FormData();
      formData.append("approverId",this.createLoanValue.approverId)
      formData.append("type",this.createLoanValue.type)
      formData.append("totalMoney",this.createLoanValue.totalMoney)
      formData.append("interestRate",this.createLoanValue.interestRate)
      formData.append("file",this.createLoanValue.file)
      formData.append("url",this.createLoanValue.url)
      this.$store.dispatch("request/postF", formData).then(() => {
        this.$message.success("请求贷款成功!!");
        this.getDefaultValue()
        this.$emit("updateData");
      });
    },
    hide() {
      //   this.$emit("hide");
      console.log(new Date() + "*****************");
    },
    // 当文件列表发生改变时，获取文件内容
    onChange(file,fileList) {
      this.createLoanValue.file = fileList[0].raw;
      console.log(this.createLoanValue.file)
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: conter;
}
.body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: conter;
}
</style>